import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

import XOXO

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("✕〇✕〇")

    GameState {
        id: game_state
        round: 1
        turn:'✕'
    }

    property GameState gs: game_state

    ColumnLayout {
        Label {
            font.pixelSize: 14
            text: 'Welcome to mini tic-tac-toe game!'
        }

        Label {
            font.pixelSize: 14
            text: '- HAVE FUN -'
        }

        GridLayout {
            id:board

            columnSpacing:0
            columns: 3
            rowSpacing:0

            Repeater {
                id: cells
                model: gs.units

                Rectangle {
                    required property int index
                    required property string modelData

                    implicitWidth: 36
                    implicitHeight: 36
                    border.color: '#000000'
                    border.width: 1

                    Label {
                        anchors.fill: parent
                        font.pixelSize: 36
                        text: parent.modelData
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }

                    MouseArea {
                        anchors.fill: parent
                        enabled: !gs.win && parent.modelData == ""
                        onClicked: {
                            gs.place(parent.index)
                        }
                    }
                }
            }
        }
        // --

        Label {
            id: countRound
            font.pixelSize: 14
            text: 'ROUND: '+gs.round
        }

        Label {
            id: turn
            font.pixelSize: 14
            text: 'TURN: '+gs.turn
        }

        Label {
            id: stats
            font.pixelSize: 14
            color: gs.win ? '#ff0000' : '#000000'
            text: 'STATS: '+gs.stats
        }

        Label {
            font.pixelSize: 14
            text: 'Click <a href="#">here</a> to replay.'
            onLinkActivated: function(link) {
                gs.replay()
            }
        }
    }
}
